<template>
    <view style="height: 100vh; overflow: hidden;">
        <view class="bg">
            <image src="@/resource/login/login-bg.png"></image>
        </view>
        <view style="color: white; font-size: 22px; position: relative; top: -180px; text-align: center;">
            <span>欢迎来到车联网服务平台商家端</span>
        </view>
        <view class="car">
            <image src="@/resource/login/login-car.png"></image>
        </view>
        <view class="content">
            <u-form :model="LoginForm" ref="uForm">
                <!-- 邮箱输入框 -->
                <u-form-item>
                    <u-input v-model="LoginForm.email" placeholder="请输入邮箱" 
                        style="border: none; border-radius: 0;" />
                </u-form-item>

                <!-- 验证码输入框 -->
                <u-form-item>
                    <u-input v-model="LoginForm.code" placeholder="请输入验证码" 
                        style="border: none; border-radius: 0;" />
                    <u-button size="small" style="border-radius: 22px;" slot="right" :disabled="isCodeBtnDisabled"
                        @click="getCode">{{ codeBtnText }}</u-button>
                </u-form-item>
            </u-form>

            <span style="color: #3183FB;" @click="toRegister">立即注册></span>
            <u-button shape="circle" type="primary" style="margin-top: 20px;" @click="login_btn">登录</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            LoginForm: {
                email: '',
                code: ''
            },

            isCodeBtnDisabled: false, // 验证码按钮是否禁用
            codeBtnText: '获取验证码', // 验证码按钮文本
            codeTimer: null // 验证码倒计时定时器
        };
    },
    methods: {
        // 登录按钮逻辑
       async login_btn() {
           if (!this.LoginForm.email.trim()) {
               return uni.showToast({ title: '邮箱不能为空', icon: 'none' });
           }
           if (!this.LoginForm.code.trim()) {
               return uni.showToast({ title: '验证码不能为空', icon: 'none' });
           }
       
           this.$http({
               url: '/api/auth/security',
               method: 'POST',
               data: this.LoginForm,
               success: (res) => {
				   console.log(res)
                   // 假设接口返回格式为 { msg: "验证成功", code: 200, token: "xxx" }
                   if ( res.data.msg === "验证成功") {
					   console.log(res)
                       uni.setStorageSync("token", res.data.data.access_token ); 
                       uni.showToast({ title: res.data.msg || '登录成功', icon: 'success' });
					   this.getShopInfo()
                       this.toindex(); // 跳转主页
                   } else {
                       // 如果msg不是“验证成功”，即使code为200，也算登录失败
                       uni.showToast({ title: res.data.msg || '登录失败', icon: 'fail' });
                   }
               },
               fail: (error) => {
                   // 如果请求失败
                   uni.showToast({ title: '请求失败，请稍后重试', icon: 'none' });
               }
           });
       },

		getShopInfo(){
			let that = this
			this.$http({
				url: '/api/shop/shop/phone/'+that.LoginForm.email,
				method: 'get',
				success(res) {
					if (res.data.code == 200) {
						uni.setStorageSync("shopId",res.data.data.shopId)
					} else {
						console.log("sad")
					}
				}
			})
		},
        toindex(){
			uni.navigateTo({
			    url: '/pages/index/index',
			    animationType: 'pop-in',
			    animationDuration: 200
			});
		},

        // 获取验证码
        getCode() {
            if (this.isCodeBtnDisabled) return;

            if (!this.LoginForm.email.trim()) {
                return uni.showToast({ title: '请输入邮箱地址', icon: 'none' });
            }

            this.isCodeBtnDisabled = true;
            this.codeBtnText = '3秒后重新获取';
            let seconds = 3;

            // 开始倒计时
            this.codeTimer = setInterval(() => {
                seconds--;
                if (seconds > 0) {
                    this.codeBtnText = `${seconds}秒后重新获取`;
                } else {
                    clearInterval(this.codeTimer);
                    this.isCodeBtnDisabled = false;
                    this.codeBtnText = '获取验证码';
                }
            }, 1000);

            // 调用获取验证码的接口
            this.$http({
                url: '/api/auth/tocode',
                method: 'POST',
                data: { email: this.LoginForm.email },
                success: (res) => {
                    if (res.data.code === 200) {
                        uni.showToast({ title: '验证码发送成功', icon: 'success' });
                    } else {
                        uni.showToast({ title: res.data.message || '验证码发送失败', icon: 'none' });
                    }
                },
                fail: (error) => {
                    console.error('验证码接口请求出错：', error);
                    uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
                    clearInterval(this.codeTimer);
                    this.isCodeBtnDisabled = false;
                    this.codeBtnText = '获取验证码';
                }
            });
        },

        // 跳转到注册页
        toRegister() {
            uni.navigateTo({
                url: '/pages/register/register',
                animationType: 'pop-in',
                animationDuration: 200
            });
        }
    },
    beforeDestroy() {
        // 清理定时器
        if (this.codeTimer) clearInterval(this.codeTimer);
    }
};
</script>

<style lang="scss" scoped>
.bg image {
    width: 100%;
}
.car {
    position: relative;
    top: -152px;
    left: 116px;
    z-index: 2;
}
.content {
    position: relative;
    width: 100%;
    top: -200px;
    height: 100vh;
    border-radius: 28px;
    background-color: white;
    padding: 60px 60px;
    box-sizing: border-box;
}
.car image {
    width: 42%;
    height: 226rpx;
}
</style>
